<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改部门</title>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/dept/dept.css}" rel="stylesheet">

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-treetable/bootstrap-treetable.js}"></script>
    <script th:src="@{/js/layer/layer.min.js}"></script>
    <script th:src="@{/validate/jquery.validate.min.js}"></script>
    <script th:src="@{/validate/messages_zh.min.js}"></script>
    <script th:src="@{/validate/jquery.validate.extend.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/system/dept.js}"></script>

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <!--/*@thymesVar id="dept" type="com.lzw.yin.domain.entity.Dept"*/-->
    <form class="form-horizontal m" id="form-dept-edit" th:object="${dept}">
        <input name="deptId" type="hidden" th:field="*{deptId}"/>
        <input id="treeId" name="parentId" type="hidden" th:field="*{parentId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">上级部门：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <label for="treeName"></label><input class="form-control" type="text" id="treeName"
                                                         onclick="selectDeptTree()" readonly
                                                         th:field="*{parentName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">部门名称：</label>
            <div class="col-sm-8">
                <label for="deptName"></label><input class="form-control" type="text" name="deptName"
                                                     th:field="*{deptName}" id="deptName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">显示排序：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="orderNum" th:field="*{orderNum}" required>
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">负责人：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="leader" th:field="*{leader}">
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">联系电话：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="phone" th:field="*{phone}">
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邮箱：</label>
            <div class="col-sm-8">
                <label>
                    <input class="form-control" type="text" name="email" th:field="*{email}">
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">部门状态：</label>
            <div class="col-sm-8">
                <div class="radio-box">
                    <div class="iradio-blue"><input type="radio" id="6"
                                                    name="status"
                                                    style="position: absolute; opacity: 0;"
                                                    value="0" th:field="*{status}">
                        <ins class="iCheck-helper"
                             style="position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; background: rgb(255, 255, 255); border: 0; opacity: 0;"></ins>
                    </div>
                    <label for="6">正常</label>
                </div>
                <div class="radio-box">
                    <div class="iradio-blue"><input type="radio" id="7"
                                                    name="status" value="1"
                                                    style="position: absolute; opacity: 0;" th:field="*{status}">
                        <ins class="iCheck-helper"
                             style="position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; background: rgb(255, 255, 255); border: 0; opacity: 0;"></ins>
                    </div>
                    <label for="7" class="">停用</label>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    let treeId = $("#treeId");

    let iRadio = $(".iradio-blue");

    let formDeptEdit = $("#form-dept-edit");

    $(function () {

        //状态初始化
        if (iRadio.eq(0).find('input').prop("checked")) {
            iRadio.eq(0).addClass('checked');
        } else {
            iRadio.eq(1).addClass('checked');
        }

        //绑定状态事件
        iRadio.each(function () {
            let _this = $(this);
            _this.on("click", function () {
                changeStatus(_this);
            });
        });
    })

    /*部门管理-修改-选择部门树*/
    function selectDeptTree() {
        let deptId = treeId.val();
        let excludeId = $("input[name='deptId']").val();
        if (deptId > 0) {
            layer.open({
                type: 2,
                area: ['380px', height],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "部门选择",
                content: "/dept/selectDeptTree/" + treeId.val() + "/" + excludeId,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function (index) {
                    doSubmit(index)
                },
                cancel: function () {
                    return true;
                }
            });
        } else {
            layer.alert("父部门不能选择", {
                icon: "warning",
                title: "系统提示",
                btn: ['确认'],
                btnclass: ['btn btn-primary'],
            });
        }
    }

    function editRow() {
        if (formDeptEdit.validate().form()) {
            $.ajax({
                cache: true,
                type: "POST",
                url: "/dept/edit",
                data: formDeptEdit.serialize(),
                async: false,
                error: function () {
                    layer.alert("系统错误", {
                        icon: "2",
                        title: "系统提示",
                        btn: ['确认'],
                        btnclass: ['btn btn-primary'],
                    });
                }, success: function (result) {
                    if (result.code !== 0) {
                        layer.alert(result.msg, {
                            title: "系统提示",
                            btn: ['确认'],
                            btnclass: ['btn btn-primary'],
                        });
                    }
                    let index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }
            });
        }
    }


    formDeptEdit.validate({
        onkeyup: false,
        rules: {
            deptName: {
                remote: {
                    url: "/dept/checkDeptNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "deptId": function () {
                            return $("#deptId").val();
                        },
                        "parentId": function () {
                            return $("input[name='parentId']").val();
                        },
                        "deptName": function () {
                            return trim($("#deptName").val());
                        }
                    },
                    dataFilter: function (data) {
                        return data === "0";
                    }
                }
            },
            orderNum: {
                digits: true
            },
            email: {
                email: true,
            },
            phone: {
                isPhone: true,
            },
        },
        messages: {
            "deptName": {
                remote: "部门已经存在"
            }
        },
        focusCleanup: true
    });

    function doSubmit(index) {
        let body = layer.getChildFrame('body', index);
        treeId.val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }
</script>
</body>
</html>
